<template>
  <div id="app">
    <div class="title">
      <a class="logo-box">ZhebianHerb</a>
      <a class="custom-title" @click="jumpAdd()">八卦堂</a>
      <!-- <Swiper :images="bannerImages" class="news-img"/> -->
    </div>
    <div class="ctn-div-parent" style="padding-bottom: 20px" v-if="flag">
      <div style="width: 72%;margin: 0 auto;">
        <el-row>
          <el-col :span="16">
            <div style="width: 100%;background-color: white;height: 100px;" v-if="mainData">
              <span
                  style="font-size: 20px;font-weight: bold;line-height: 50px;display: inline-block;"
                  @click="showDetail(mainData[0].id)">{{
                  mainData[0].mainTitle
                }}</span>
              <div style="display: flex;">
                <div style="width: 50%;text-indent: 0.5rem;display: flex;align-items: center"
                     v-for="(item, index) in mainData.slice(1)" v-bind:key="index + 1" @click="showDetail(item.id)">
                  <el-tag type="danger">{{ item.tag }}</el-tag>
                  <p class="text-hidden">{{ item.mainTitle }}</p>
                </div>
              </div>
            </div>
            <div style="display: flex;justify-content: space-between;margin-top: 10px;">
              <div style="width: 50%;background-color: white;height: 50%;text-indent: 0.5rem;">
                <template v-for="(item, index) in center1.slice(0,9)">
                  <h3 v-if="index % 5 === 0"  @click="showDetail(item.id)">{{ item.mainTitle }}</h3>
                  <p v-else  @click="showDetail(item.id)">{{ item.mainTitle }}</p>
                </template>
              </div>
              <div
                  style="width: 49%;height: 381px;display: flex;flex-direction: column;justify-content: space-between;">
                <div style="height: 180px;background-color: white;text-indent: 0.5rem;">
                  <template v-for="(item, index) in center1.slice(9,13)" @click="showDetail(item.id)">
                    <h3 v-if="index % 4 === 0"  @click="showDetail(item.id)">{{ item.mainTitle }}</h3>
                    <p v-else  @click="showDetail(item.id)">{{ item.mainTitle }}</p>
                  </template>
                </div>
                <div style="height: 182px;display: flex;justify-content: space-between;">
                  <div style="background-color: white;width: 48%;overflow: hidden;" v-for="(item) in center2.slice(0,2)" @click="showDetail(item.id)">
                    <img style="width: 250px;height:120px;display: inline-block;"
                         :src=item.img alt="">
                    <p style="line-height: 25px;">{{item.mainTitle}}</p>
                    <span style="color: #999999 !important;">{{item.tag}}</span>
                  </div>
                </div>
              </div>
            </div>
            <div style="height: 165px;margin-top:10px;display: flex;justify-content: space-between;">
              <div style="width: 50%;display: flex;justify-content: space-between;">
                <div style="background-color: white;width: 48%;overflow: hidden;" v-for="(item) in center2.slice(2,4)" @click="showDetail(item.id)">
                  <img style="width: 250px;height:120px;display: inline-block;"
                       :src=item.img alt="">
                  <p style="line-height: 25px;">{{item.mainTitle}}</p>
                </div>
              </div>
              <div style="width: 49%;background-color: white;text-indent: 0.5rem;">
                <template v-for="(item, index) in center1.slice(13,17)" @click="showDetail(item.id)">
                  <h3 v-if="index % 4 === 0"  @click="showDetail(item.id)">{{ item.mainTitle }}</h3>
                  <p v-else  @click="showDetail(item.id)">{{ item.mainTitle }}</p>
                </template>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div style="width: 100%;padding-left:10px;height: 665px;">
              <div
                  style="padding:0;height: 665px;background-color: white;display: flex;flex-direction: column;justify-content: space-between;">
                <div  v-for="(item) in right" style="display: flex;" @click="showDetail(item.id)">
                  <div style="width: 154px;height: 80px;">
                    <img style="width: 154px;height: 80px;"
                         :src=item.img alt="">
                  </div>
                  <div class="ctn-aside-li-div">
                    <span style="font-size: 12px;">{{item.mainTitle}}</span>
                    <el-tag type="danger">{{item.tag}}</el-tag>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row style="margin-top: 20px">
          <el-col :span="17">
            <div style="width: 100%;height: 300px;padding-left:10px;background-color: white">
              <h3>政策文件</h3>
              <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="政策文件" name="first">
                  <div v-for="item of bottom1" class="tab-div" @click="showDetail(item.id)">
                    <span>{{item.mainTitle}}</span>
                    <span>{{item.ctime}}</span>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="法律法规" name="second">
                  <div v-for="item of bottom2" class="tab-div" @click="showDetail(item.id)">
                    <span>{{item.mainTitle}}</span>
                    <span>{{item.ctime}}</span>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="政策服务" name="third">
                  <div v-for="item of bottom3" class="tab-div" @click="showDetail(item.id)">
                    <span>{{item.mainTitle}}</span>
                    <span>{{item.ctime}}</span>
                  </div>
                </el-tab-pane>
              </el-tabs>
            </div>
          </el-col>
          <el-col :span="7" style="padding-left: 10px">
            <div style="background-color: white;height: 300px">
              <div v-for="(item,index) of bottom4" style="display: flex;
    flex-direction: row;
    align-items: center;" @click="showDetail(item.id)">
                <span class="circle" :style="{ backgroundColor: getHotColor(index) }">{{ index + 1 }}</span>
                <span class="hot-div-span">
                 {{item.mainTitle}}
                </span>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <AboutUs/>
    <div style="width: 100%;">
      <Footer/>
    </div>
  </div>
</template>
<script setup>
import {ref,onMounted} from "vue";
import {getNewsApi} from "@/apis/news.js";

import {useRouter} from "vue-router";

const router = useRouter();
const activeName = ref("first")
const mainData = ref([])
const center2 = ref([])
const center1 = ref([])
const right = ref([])
const bottom1 = ref([])
const bottom2 = ref([])
const bottom3 = ref([])
const bottom4 = ref([])
const flag=ref(false)
const handleClick = () => {
  console.log("33")
}

const getHotColor = (index) => {
  const colors = ['#e70707', '#f1c412', '#eda03b', '#999999', '#999999', '#999999', '#999999'];
  return colors[index % colors.length];
}

const jumpAdd = () => {
  router.push('/news/add')
}
const showDetail = (newsId) => {
  router.push(`/news/detail/${newsId}`);
}

const initData = () => {
  getNewsApi().then(res => {
    mainData.value = res.data.main
    center2.value = res.data.center2
    center1.value = res.data.center1
    right.value = res.data.right
    bottom1.value = res.data.bottom1
    bottom2.value = res.data.bottom2
    bottom3.value = res.data.bottom3
    bottom4.value = res.data.bottom4
    flag.value=true;
  })
}
initData()
</script>
<script>
import Swiper from '@/components/Swiper.vue';
import AboutUs from '@/components/AboutUs.vue';
import Footer from '@/components/Footer.vue';

export default {
  components: {
    Swiper,
    AboutUs,
    Footer
  },
  data() {
    return {
      bannerImages: [
        'http://p1.img.cctvpic.com/photoworkspace/contentimg/2018/08/14/2018081414515365380.jpg',
        'http://p1.img.cctvpic.com/photoworkspace/contentimg/2018/08/14/2018081414522374719.jpg',
        'http://p1.img.cctvpic.com/photoworkspace/contentimg/2018/08/14/2018081414520862093.jpg',
        'http://p1.img.cctvpic.com/photoworkspace/contentimg/2015/08/28/2015082808462964125.jpg',
        'http://p1.img.cctvpic.com/photoworkspace/contentimg/2016/04/10/2016041023464049462.JPG',
      ],
      newsList: [
        // 这里填充你的新闻数据
        {
          id: 1,
          title: '新闻标题1',
          description: '这是新闻的简短描述1',
          url: 'https://example.com/news1'
        },
        {
          id: 2,
          title: '新闻标题2',
          description: '这是新闻的简短描述2',
          url: 'https://example.com/news2'
        },
        // ... 更多新闻
      ]
    };
  }
};
</script>

<style scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
}

p {
  padding: 0;
  margin: 0;
  font-size: 15px;
  line-height: 40px;
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 溢出隐藏 */
  text-overflow: ellipsis; /* 使用省略号 */
}

.text-hidden {
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 溢出隐藏 */
  text-overflow: ellipsis; /* 使用省略号 */
}

h3 {
  margin: 0;
  padding: 0;
  line-height: 50px;
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 溢出隐藏 */
  text-overflow: ellipsis; /* 使用省略号 */
}

.p-h3 {
  font-size: 1.17em;
  font-weight: bold;
  line-height: 50px
}

ul {
  list-style: none;
  padding: 0;
  left: 0;
}

li {
  margin: 0;
  padding: 0;
}

.tab-div {
  display: flex;
  justify-content: space-between;
  padding-right: 10px;
  font-size: 12px;
  line-height: 30px;
  border-bottom: 1px solid grey;
}


.hot-div-span {
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 溢出隐藏 */
  text-overflow: ellipsis; /* 使用省略号 */
  font-size: 12px;
  line-height: 40px;
}

.circle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  text-align: center;
  line-height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0px 10px;
  color: #fff;
}

.ctn-div-parent {
  padding-top: 20px;
  width: 100%;
  background-color: #f5f5f5;
}

.ctn-aside-li-div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  margin-left: 5px
}

.title {
  width: 100%;
  font-family: SimSun;
  color: #5ba58ad8;
  /* 设置页面阴影 */
  box-shadow: 2px 1px 19px rgba(0, 0, 0, .1);
}

.logo-box {
  width: 120px;
  line-height: 80px;
  font-size: 24px;
  font-weight: bold;
  font-family: SimSun;
  /* color: #F5D3B8; */
  /* color: #b5c2a6; */
  color: #5ba58a;
  padding-left: 20px;
}

.custom-title {
  line-height: 80px;
  font-family: SimSun;
  font-weight: bold;
  font-size: 32px;
  color: #508b75;
  padding-left: 10px;
}

.son-title {
  width: 100%;
}

.son-title img {
  margin-top: 5px;
  margin-left: 59px;
}

.son-title a {
  /* line-height: 80px; */
  text-align: left;
  font-family: SimSun;
  font-weight: bold;
  font-size: 30px;
  color: #717171;
  /* color: #f9bb88; */
}

.news-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 20px;
  /* 添加了 20px 的顶部外边距 */
}

/* 确保新闻列表的边框不会与轮播图的底部重叠 */
.news-item {
  border: 1px solid #ddd;
  padding: 10px;
  width: 300px;
}
</style>
